<template>
  <div class="refund-list">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex"
             justify="start"
             class="search-item-left">
             <Col class="search-item">
          <span class="search-label search-label-w1">订单编号:</span>
          <Input v-model="searchParam.orderCode"
                 placeholder="请输入" />
          </Col>
          <!-- <Col class="search-item">
          <span class="search-label">门店名称:</span>
          <Select v-model="searchParam.shopId"
                  @on-change="doSearch"
                  filterable
                  class="select-shop-item">
            <Option v-for="item in shopListData"
                    :value="item.shopId"
                    :key="item.shopId">{{ item.shopName }}</Option>
          </Select>
          </Col> -->
          <Col class="search-item">
            <span class="search-label"
              style="line-height:36px;display:inline-block;vertical-align: top;
  ">门店名称：</span>
            <div style="display:inline-block">
              <vueTreeselectChoice
                ref="vueTreeselectChoice"
                @input="handleShop"
                :disable-branch-nodes="true"
                @on-api-finish="apiFinish"
                permissionCode="moms:pay:viewpayrecords"
                v-model="searchParam.shopId"></vueTreeselectChoice>
            </div>
          </Col>
          <Col class="search-item">
          <span class="search-label">退款方式:</span>
          <Select v-model="payCode"
                  @on-change="doSearch">
            <Option v-for="item in selectPayCode"
                    :value="item.value"
                    :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  type="primary"
                  @click="searchAll">查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  @click="resetParam">重置</Button>
          </Col>
        </Row>
        <Row type="flex"
             justify="end"
             class="search-item-right">
          <Col class="search-item">
          <Button v-if="exampleShow"
                  @click="exampleOpen">收起筛选
            <Icon type="ios-arrow-down" />
          </Button>
          <Button v-else
                  @click="exampleOpen">更多筛选
            <Icon type="ios-arrow-up" />
          </Button>
          </Col>
        </Row>
      </Row>
      <div class="search-example"
           v-show="exampleShow">
        <Row type="flex">
          <Col class="search-item">
          <span class="search-label">退款状态:</span>
          <Select v-model="refundStatus"
                  @on-change="doSearch">
            <Option v-for="item in selectRefundStatus"
                    :value="item.value"
                    :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
          <!-- <Col class="search-item">
        <span class="search-label search-label-w1">门店ID:</span>
         <Input v-model="searchParam.shopId" placeholder="请输入" />
      </Col> -->
          <!-- <Col class="search-item">
       <span class="search-label search-label-w1">商户ID:</span>
         <Input v-model="searchParam.merchantId" placeholder="请输入" />
      </Col> -->
          <!-- <Col class="search-item">
          <span class="search-label search-label-w1">公众号ID:</span>
          <Input v-model="searchParam.partnerSign"
                 placeholder="请输入"
                 @on-keyup='filterSpace' />
          </Col> -->
          <Col class="search-item">
          <span class="search-label">退款发起时间:</span>
          <DatePicker type="datetimerange"
                      :editable="false"
                      class="data-time-style"
                      style="width:280px;"
                      :value="payStartTime"
                      @on-change="selectStartTime"
                      @on-clear="clearStartTime"
                      :options="optionsStartTime"
                      placement="bottom">
          </DatePicker>
          </Col>
          <!-- <Col class="search-item">
          <span class="search-label search-label-w4">退款完成时间:</span>
          <DatePicker type="datetimerange"
                      :editable="false"
                      class="data-time-style"
                      style="width:280px;"
                      :value="payEndTime"
                      @on-change="selectEndTime"
                      @on-clear="clearEndTime"
                      :options="optionsEndTime"
                      placement="bottom">
          </DatePicker>
          </Col> -->
        </Row>
      </div>
    </div>
    <Table stripe
           :height="this.tableHeight"
           class="table-list"
           :loading='loading'
           :columns="columns"
           :data="data">
      <!-- 支付方式 -->
      <template slot-scope="{ row }"
                slot="payCode">
        <span>{{ row.payCode==="ALIPAY"?"支付宝支付":row.payCode==="WEIXIN"?"微信支付":row.payCode==="CASH"?"现金支付":row.payCode==="UNION"?"银联支付":row.payCode==="TRANSFER_TO_PUBLIC_ACCOUNT"?"对公转账":row.payCode==="INTEGRAL"?"积分":row.payCode==="TICKET"?"彩票":row.payCode==="CURRENCY"?"游戏币":"" }}</span>
      </template>
      <!-- 支付渠道 -->
      <template slot-scope="{ row }"
                slot="payPlatform">
        <span>{{ row.payPlatform==="WECHAT_MALL"?"微信商城":row.payPlatform==="ALL_IN_ONE_MACHINE"?"一体机":row.payPlatform==="SWIPE_MACHINE"?"刷卡器":row.payPlatform==="BOSS_ORDER"?"BOSS前台":row.payPlatform==="TEAM_BUY_KOUBEI"?"口碑":row.payPlatform==="MEI_TUAN"?"新美大(美团点评)":"" }}</span>
      </template>
      <!-- 退款状态 -->
      <template slot-scope="{ row }"
                slot="refundStatus">
        <!-- <span>{{ row.refundStatus==="0"?"退款失败":row.refundStatus==="1"?"退款成功":row.refundStatus==="2"?"退款处理中":row.refundStatus==="3"?"退款关闭":"" }}</span> -->
        <span>{{ row.refundStatus==="1"?"退款成功":row.refundStatus==="2"?"退款中":"" }}</span>
      </template>
      <!-- 支付金额 -->
      <!-- <template slot-scope="{ row }" slot="payPrice">
        <span>{{ row.payPrice?row.payPrice:"0.00" }}</span>
      </template> -->
      <!-- 退款金额 -->
      <template slot-scope="{ row }"
                slot="refundAmount">
        <span>{{ row.refundAmount?row.refundAmount:"0.00" }}</span>
      </template>
    </Table>
    <div class="page-box">
      <Page :total="total"
            :current="pageIndex"
            :page-size="pageSize"
            @on-page-size-change="selectPageNum"
            @on-change="selectPageIndex"
            ref="pages"
            show-total
            show-sizer />
    </div>
  </div>
</template>
<script>
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
import { refundQuery } from '@/api/pay/index'
// import { getShopList } from '@/api/system/store'
import { formatDate } from '@/libs/tools'
export default {
  name: 'payment_refund_list',
  components: { vueTreeselectChoice },
  data () {
    return {
      partnerSign: '',
      createTimeBegin: '',
      createTimeEnd: '',
      finishTimeBegin: '',
      finishTimeEnd: '',
      loading: true,
      exampleShow: true,
      total: 0,
      tableHeight: 0,
      refundStatus: '-1', // 退款状态
      payCode: '-1', // 退款方式
      payStartTime: [
        formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ),
        formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      ],
      payEndTime: [
        formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ),
        formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      ],
      orderCode: '',
      searchParam: {
        orderCode: '', // 订单编号
        shopId: null, // 门店ID
        merchantId: this.$store.state.user.merchantId, // 商户ID
        partnerSign: '', // 公众号ID
        createTimeBegin: formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ), // 退款发起时间开始
        createTimeEnd: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'), // 退款发起时间结束
        finishTimeBegin: formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ), // 退款完成时间开始
        finishTimeEnd: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss') // 退款完成时间结束
      },
      pageIndex: 1,
      pageSize: 10,
      selectPayCode: [
        { value: '-1', label: '全部' },
        { value: 'WEIXIN', label: '微信支付' },
        { value: 'ALIPAY', label: '支付宝支付' },
        { value: 'UNION', label: '银联支付' },
        { value: 'CASH', label: '现金支付' },
        { value: 'TRANSFER_TO_PUBLIC_ACCOUNT', label: '对公转账' }
      ],
      selectRefundStatus: [
        { value: '-1', label: '全部' },
        { value: '2', label: '退款中' },
        { value: '1', label: '退款成功' }
        // { value: '0', label: '退款失败' }
      ], // 退款状态
      columns: [
        { title: '退款流水号', key: 'refundOrderCode', fixed: 'left', width: 280 },
        { title: '第三方退款流水号', key: 'thirdSerialNo', width: 300 },
        { title: '支付流水号', key: 'paymentSerialNo', width: 200 },
        { title: '订单编号', key: 'orderId', width: 200 },
        { title: '门店名称', key: 'shopName', width: 200 },
        { title: '顾客姓名', key: 'memberName', width: 200 },
        // { title: '订单ID', key: 'orderId', width: 200 },
        // { title: '用户ID', key: 'memberId', width: 200 },
        // { title: '商户ID', key: 'merchantId', width: 300 },
        // { title: '门店ID', key: 'shopId', width: 300 },
        // { title: '公众号ID', key: 'partnerSign', width: 300 },
        { title: '支付方式', slot: 'payCode', width: 150 },
        { title: '支付渠道', slot: 'payPlatform', width: 150 },
        { title: '支付金额(元)', slot: 'refundStatus', width: 150 },
        { title: '退款金额(元)', slot: 'refundAmount', width: 150 },
        { title: '退款状态', slot: 'refundStatus', width: 150 },
        { title: '退款发起时间', key: 'createTime', width: 160 },
        { title: '退款完成时间', key: 'finishTIme', width: 160 },
        { title: '备注', key: 'remark', width: 220 }
      ],
      data: [],
      shopListData: [], // 门店列表
      optionsEndTime: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      optionsStartTime: {}
    }
  },

  methods: {
    filterSpace () {
      this.searchParam.partnerSign = this.searchParam.partnerSign.replace(
        /\s+/g,
        ''
      )
    },
    async handleShop () {
      // const ids = await this.$refs.vueTreeselectChoice.getShopId()
      // this.searchParam.shopId = ids
      this.doSearch()
    },
    apiFinish () {
      this.doSearch()
    },
    // 筛选按钮
    exampleOpen () {
      this.exampleShow = !this.exampleShow
    },
    // 退款列表
    searchList () {
      this.tableHeight = 0
      // if (this.searchParam.shopId !== '') {
      this.loading = true
      refundQuery({
        orderCode: this.orderCode, // 订单编号
        // ...this.searchParam,
        shopId: this.searchParam.shopId,
        merchantId: this.$store.state.user.merchantId,
        // partnerSign: this.partnerSign,
        createTimeBegin: this.createTimeBegin,
        createTimeEnd: this.createTimeEnd,
        // finishTimeBegin: this.finishTimeBegin,
        // finishTimeEnd: this.finishTimeEnd,
        refundStatus: this.refundStatus === '-1' ? '' : this.refundStatus,
        payCode: this.payCode === '-1' ? '' : this.payCode,
        offset: (this.pageIndex - 1) * this.pageSize, // 分页OFFSET
        limit: this.pageSize // 分页大小
      })
        .then(res => {
          if (res.data.status === 200) {
            if (res.data.data !== null) {
              this.loading = false
              this.data = res.data.data
              this.total = res.data.totalCount
              if (res.data.data && res.data.data.length >= 10) {
                this.tableHeight = 537
              }
            } else {
              this.loading = false
              this.data = []
              this.total = 0
            }
          } else {
            this.loading = false
            this.$Message.error(`${res.data.error}`)
          }
        })
        .catch(err => {
          this.loading = false
          this.$Message.error(`${err}`)
        })
      // }
    },
    // 门店列表
    getShopListData () {
      // this.tableHeight = 0
      // this.loading = true
      // getShopList({
      //   permissionCode: 'moms:pay:viewrefundrecords', // 查看退款记录
      //   merchantId: this.$store.state.user.merchantId,
      //   offset: 0,
      //   limit: 9999
      // })
      //   .then(res => {
      //     if (res.data.status === 200) {
      //       if (res.data.totalCount > 0) {
      //         this.shopListData = res.data.data
      //         this.searchParam.shopId = res.data.data[0].shopId
      //         this.searchList()
      //       } else {
      //         this.loading = false
      //         this.shopListData = []
      //       }
      //     } else {
      //       this.loading = false
      //       this.$Message.error(`${res.data.error}`)
      //     }
      //   })
      //   .catch(err => {
      //     this.$Message.error(`${err}`)
      //   })
    },
    searchAll () {
      // if (this.searchParam.shopId !== '') {
      this.orderCode = this.searchParam.orderCode
      this.createTimeBegin = this.searchParam.createTimeBegin
      this.createTimeEnd = this.searchParam.createTimeEnd
      this.finishTimeBegin = this.searchParam.finishTimeBegin
      this.finishTimeEnd = this.searchParam.finishTimeEnd
      this.partnerSign = this.searchParam.partnerSign
      this.pageIndex = 1
      this.pageSize = 10
      this.searchList()
      // } else {
      //   this.tableHeight = 0
      //   this.data = []
      //   this.total = 0
      //   this.$Message.error(`请选择门店！`)
      // }
    },
    // 查询按钮
    doSearch () {
      // if (this.searchParam.shopId !== '') {
      this.pageIndex = 1
      this.pageSize = 10
      this.searchList()
      // } else {
      //   this.tableHeight = 0
      //   this.data = []
      //   this.total = 0
      //   this.$Message.error(`请选择门店！`)
      // }
    },
    // 分页行数
    selectPageNum (num) {
      this.pageSize = num
      this.pageIndex = 1
      this.searchList()
    },
    // 分页页数
    selectPageIndex (val) {
      this.pageIndex = val
      this.searchList()
    },
    // 选择开始时间
    selectStartTime (val) {
      this.searchParam.createTimeBegin = val[0] // 退款发起时间开始
      this.searchParam.createTimeEnd = val[1] // 退款发起时间结束
      this.optionsEndTime = {
        disabledDate (date) {
          return date < new Date(val[0])
        }
      }
    },
    // 选择结束时间
    selectEndTime (val) {
      this.searchParam.finishTimeBegin = val[0] // 退款完成时间开始
      this.searchParam.finishTimeEnd = val[1] // 退款完成时间结束
      this.optionsStartTime = {
        disabledDate (startTime) {
          return startTime > new Date(val[1])
        }
      }
    },

    // 清空开始时间
    clearStartTime () {
      this.searchParam.createTimeBegin = '' // 退款发起时间开始
      this.searchParam.createTimeEnd = '' // 退款发起时间结束
      this.optionsEndTime = {}
      this.optionsStartTime = {}
    },
    // 清空结束时间
    clearEndTime (val) {
      this.searchParam.finishTimeBegin = '' // 退款完成时间开始
      this.searchParam.finishTimeEnd = '' // 退款完成时间结束
    },
    // 重置
    resetParam () {
      this.orderCode = ''
      this.refundStatus = '-1' // 退款状态
      this.payCode = '-1' // 退款方式
      this.searchParam = {
        shopId: null, // 门店ID
        merchantId: this.$store.state.user.merchantId, // 商户ID
        partnerSign: '', // 公众号ID
        createTimeBegin: formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ), // 退款发起时间开始
        createTimeEnd: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'), // 退款发起时间结束
        finishTimeBegin: formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ), // 退款完成时间开始
        finishTimeEnd: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss') // 退款完成时间结束
      }
      this.createTimeBegin = formatDate(new Date(new Date().getTime() - 86400000 * 7), 'yyyy-MM-dd hh:mm:ss')
      this.createTimeEnd = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      this.finishTimeBegin = formatDate(new Date(new Date().getTime() - 86400000 * 7), 'yyyy-MM-dd hh:mm:ss')
      this.finishTimeEnd = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      this.pageIndex = 1
      this.pageSize = 10
      this.payStartTime = [
        formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ),
        formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      ]
      this.payEndTime = [
        formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ),
        formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      ]
      this.optionsEndTime = {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      }
      this.optionsStartTime = {}
      // this.searchParam.shopId = this.shopListData[0].shopId
      this.doSearch()
    }
  },
  mounted () {
    this.createTimeBegin = formatDate(new Date(new Date().getTime() - 86400000 * 7), 'yyyy-MM-dd hh:mm:ss')
    this.createTimeEnd = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    this.finishTimeBegin = formatDate(new Date(new Date().getTime() - 86400000 * 7), 'yyyy-MM-dd hh:mm:ss')
    this.finishTimeEnd = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    // this.getShopListData()
  }
}
</script>
<style lang="less">
.refund-list {
  .search-box {
    padding-top: 0;
  }
  .search-item,
  .search-item-btn {
    padding-top: 24px;
  }
  .data-time-style {
    .ivu-input-wrapper {
      width: 280px;
    }
  }
  .ivu-table-tip {
    span {
      position: absolute;
      width: 100px;
      left: 50%;
      margin-left: -50px;
    }
  }
  .select-shop-item .ivu-select-dropdown {
    width: 300px;
  }
  .select-shop-item .ivu-select-item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
